<!--
 * @Descripttion: 
 * @version: 
 * @Author: wishchan
 * @Date: 2021-12-09 15:15:59
 * @LastEditors: 川杨
 * @LastEditTime: 2022-01-05 20:01:06
-->
<template>
  <div class="business-chart">
    <div class="business-chart-tab">
      <el-button class="business-export-btn" type='primary' @click="handlerExportClick" :loading="exportLoading">
        {{ $t('common.base.export') }}
      </el-button>
    </div>
    <div style="height:20px"></div>
    <pie-chart :chart-data="pieChartData" v-loading="loading" :is-loading="loading"></pie-chart>
  </div>
</template>
<script>
import PieChart from './PieChart.vue';
import { t } from '@src/locales';
export default {
  name: 'service-type-chart',
  components:{
    [PieChart.name]:PieChart
  },
  props:{
    exportLoading:{
      type:Boolean,
      default:false
    },
    loading:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      pieChartData:{},
    }
  },
  created() {
  },
  methods: {
    handlerExportClick(){
      this.$emit('export')
    },
    chooseChart(type){
      this.chartType = type
      this.$emit('change-type', type)
    },
    init(data){
      this.getChartData(data)
    },
    getChartData(data) {
      if(!data)data = [];
      // 这里处理饼状图数据
      let pieData = data.map(item=>{
        const { dayNum, proportion, workType} = item;
        return {
          name : workType,
          value : proportion,
          dayNum
        }
      })
      this.pieChartData = {
        legend: {
          type:'scroll',
          orient: 'vertical',
          left:20,
          top:20
        },
        tooltip: {
          trigger: 'item',
          formatter: (params)=>{
            const { data:{ name, value, dayNum } } = params;
            return `${name} <br/> ${value}% <br/> ${dayNum !== undefined ? `${dayNum}${t('common.base.people')}/${t('common.base.day')}` : ''}`
          }
        },
        series: [
          {
            type: 'pie',
            data: pieData,
            label: {
              formatter(params){
                const { data:{ name, value, dayNum } } = params;
                return `${name} \n ${value}% \n ${dayNum}${t('common.base.people')}/${t('common.base.day')}`
              }
            },
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../business.scss';
.tooltipTitle{
  color:$color-primary-light-6;
  font-size:14px;
}
.tooltipDetail{
  color:orange;
  font-size:12px;
}
</style>
<style lang="scss">
.business-chart{
  .tooltipTitle{
    color:$color-primary-light-6;
    font-size:14px;
  }
  .tooltipDetail{
    color:orange;
    font-size:12px;
  } 
}
</style>